<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="//unpkg.com/iview/dist/styles/iview.css"/>
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="//unpkg.com/iview/dist/iview.min.js"></script>			
		<title></title>
		<style>
			::-webkit-scrollbar {display:none}
		</style>
	</head>
	<body style="background-color: darkgrey;">
		<div id="app" >
			<table style="border:none; padding: 10px; margin-left: 17%; margin-top: 40px;">
				<tr>
					<td style="width: 200px;">
						<span id="" style="background-color: #47CB89; height: 50px; width: 200px; display: block;">
							<input id="messageslistbtn" type="image" src="../img/message.png" style="height: 40px; width: 40px; margin-left: 40px; margin-top: 5px;"/>
							<input id="friendslistbtn" type="image" src="../img/user.png" style="height: 40px; width: 40px; margin-left: 30px; margin-top: 5px;"/>	
						</span>
			            <div id="messagelist" style="height: 400px; background-color: azure; overflow-y: scroll; overflow: -moz-hidden-unscrollable">
			            	列表一
			            </div>
			            <div id="frendslist" style="height: 400px; background-color: azure; overflow-y: scroll; overflow: -moz-hidden-unscrollable; display: none;">
			            	<i-button style="width: 200px;">添加好友</i-button>
			            	列表二
			            </div>
					</td>
					<td style="padding: 20px;">
						<div style="height: 450px; width:500px;background-color: azure; border: 1px solid; border-radius: 10px;">
							<div style="height: 40px;">
								 <i-button style="margin-left: 30px; margin-top: 5px;">返回</i-button>
							</div>
							<hr />
							<div style="height: 350px;">
								
							</div>
							<hr />
							<span style="height: 50px; display: block; border-radius: 10px;">
								<icon type="md-person" size="34" style="margin-left: 20px; margin-top: 10px;"></icon>
								<i-input style="width: 350px; margin-left: 20px; margin-top: 10px;"></i-input>
								<i-button style="margin-left: 0px; margin-top: 10px;">发送</i-button>
							</span>
						</div>						
					</td>
				</tr>				
			</table>
			<div id='item' style="height: 50px; width: 200px; background-color: #C0C0C0;" data-usernumber="12345">haha</div>
			<i-button onclick="add()">添加</i-button>
		</div>
			
	</body>
	<script src="../js/jquery.js"></script>
	<script>
		var vue = new Vue({
			el: '#app',
			data(){
				return {
					value: '',
					
				}
			},
			methods: {
				
			}
		})
	</script>
	<script>var i = 1;
    	function add() {
    		
    		$('#messagelist').append("<div class='item12' style='height: 50px; width: 200px; background-color: #C0C0C0; ' data-usernumber='123456'> 名单" + i + " </div>");
    		i++;
    	}
    	$("#item").click(function(event){
    		alert(event.currentTarget.id + event.currentTarget.dataset.usernumber);
    	})
    	
    	$("#messageslistbtn").click(function() {
    		$("#messagelist").show();
    		$("#frendslist").hide();
    	})
        
        $("#friendslistbtn").click(function() {
        	$('#frendslist').show();
        	$("#messagelist").hide();
        })
	</script>
</html>
